<!DOCTYPE html>
<html lang="en">
<!-- cesium 绘制 polyline volume -->

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title>Hello World!</title>
  <script src="../Build/CesiumUnminified/Cesium.js"></script>
  <style>
    @import url(../Build/CesiumUnminified//Widgets/widgets.css);

    html,
    body,
    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="cesiumContainer"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNWY1NTNiZC0yOWZjLTQxYTEtYmFmZS0zZDhhOWRmMmMyM2YiLCJpZCI6MTM2MDIyLCJpYXQiOjE2ODI2NzE3NjR9.iCrukqqU__ODBrOwYgkTzv2fyg_yAli8GyePHhjgiFc';

    const viewer = new Cesium.Viewer("cesiumContainer", {
      baseLayerPicker: true,//是否显示图层选择器 
    })


    const greenBox = viewer.entities.add({
      name: "Green box with beveled corners and outline",
      polylineVolume: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights([
          -84.0, 32.0, 0.0,
          -90.0, 40.0, 100000.0,
          -94.0, 36.0, 0.0,
        ]),
        shape: [
          new Cesium.Cartesian2(-50000, -50000),
          new Cesium.Cartesian2(50000, -50000),
          new Cesium.Cartesian2(50000, 50000),
          new Cesium.Cartesian2(-70000, 90000),
          // new Cesium.Cartesian2(-30000, -30000),
          new Cesium.Cartesian2(-50000, 50000),
        ],
        cornerType: Cesium.CornerType.BEVELED,
        material: new Cesium.ColorMaterialProperty(
          new Cesium.CallbackProperty(function () {
            return Cesium.Color.fromRandom({
              minimumRed: 0.75,
              minimumGreen: 0.75,
              minimumBlue: 0.75,
              alpha: 0.9,

            });
          }, false)
        ),

        outline: true,
        outlineColor: Cesium.Color.BLACK,
      },
    });

    const yellowBox = viewer.entities.add({
      name: "Yellow box with mitered corners and outline",
      position: Cesium.Cartesian3.fromDegrees(-84.0, 32.0, 0.0),
      box: {
        dimensions: new Cesium.Cartesian3(10.0, 10.0, 50.0),
        material: Cesium.Color.WHITE.withAlpha(0.3),
        outline: true,
        outlineColor: Cesium.Color.WHITE,
      }
    });


    const redPoint = viewer.entities.add({
      name: "Red box with rounded corners and outline",
      position: Cesium.Cartesian3.fromDegrees(-84.0, 32.0, 0.0),
      point: {
        pixelSize: 10,
        color: Cesium.Color.RED,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 1,
      }
    })


    viewer.zoomTo(viewer.entities);
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(-90.0, 40.0, 7500000.0),
      orientation: {
        heading: Cesium.Math.toRadians(0.0),
        pitch: Cesium.Math.toRadians(-90.0),
        roll: 0.0,
      },
    })
  </script>
</body>

</html>